import VueDragResize from 'vue-drag-resize';
import WSK from '../../../assets/websocket.js';
import { config } from '@/../config/axios_config.js';
import { emoji, ruleStr, emojiReplace, ruleImg, imgReplaceEmoji } from '../../../assets/emoticon.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'dialogBox',
  components: {
    'DialogHeader': () => { return import('./dialogHeader.vue') },
    'DialogCenter': () => { return import('./dialogCenter.vue') },
    'DialogTool': () => { return import('./dialogTool.vue') },
    'DialogFooter': () => { return import('./dialogFooter.vue') },
    // 'ws':()=>{return import ('./ws.vue')},
    VueDragResize,
  },
  inject: [
    'activeCus',//从index.vue依赖注入的客户信息
  ],
  computed: {
    ...mapState([
      'isMobile', 'loginInfo',
    ]),
    disabledSend: function () {
      if (this.loginInfo == null) { return true };
      if (!('userId' in this.activeCus.value)) { return true };
      if (this.editHtml == '') { return true };
      return false
    },
  },
  data() {
    return {
      thisWidth: 0,
      thisHeight: 0,
      molleHeight: [0, 0, 0],
      editHtml: '',
      isDev: process.env.NODE_ENV == 'development',
      // webSocket:null,//建立的连接
    }
  },
  watch: {},

  methods: {
    test() { },
    // 获取输入框的发送内容
    editChange(data) {
      this.editHtml = imgReplaceEmoji(data).replace(/\<p\>/g, '').replace(/\<\/p\>$/, '').replace(/\<\/p\>/g, '\r\n').replace(/<\/?[^>]*>/g, '');
    },
    escape2Html(str) {
      let arrEntities = {
        'lt': '<',
        'gt': '>',
        'nbsp': ' ',
        'amp': '&',
        'quot': '"'
      };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
        return arrEntities[t];
      });
    },

    // 添加表情包
    addEmoji(obj) {
      this.$refs.msgEditArea.addEmoji(obj)
    },
    readySendMsg({ type, obj }) {
      if (this.loginInfo == null) {
        this.$message({ message: '无有效身份', type: 'warning' });
        return
      };
      if (this.activeCus == null) {
        this.$message({ message: '未选择客户', type: 'warning' });
      };
      let msg = {
        msgBody: '',// 聊天内容
        type: 0,// 消息类型：0=文字，1=图片
        imgW: 0,// 图片宽度
        imgH: 0,// 图片高度
      };
      if (type == 'text') {
        if (this.editHtml == '') {
          this.$message({ message: '消息为空', type: 'warning' });
          return;
        } else {
          // console.log(this.editHtml) // 这里处理的有点绕，有空优化
          this.editChange(this.editHtml)
          msg.msgBody = this.escape2Html(this.editHtml)
          // console.log(msg.msgBody) // 这里处理的有点绕，有空优化
        }
      }
      if (type == 'image') {
        msg.msgBody = obj.src;
        msg.type = 1;
        msg.imgW = obj.width;
        msg.imgH = obj.height;
      }
      let messageObj = Object.assign(
        {
          "usersId": this.activeCus.value.userId,// 客户UserId
          "nicheng": this.activeCus.value.nicheng,// 客户的昵称
          "imgUrl": this.activeCus.value.imgUrl,// 客户的头像
        },//设定发送目标
        msg,//消息主体
        {
          "msgtype": "61",
          "isFromUser": false,//是否为自己发送的消息
          "addTime": this.$moment().format("YYYY-MM-DD HH:mm:ss")// 发送时间
        },//消息附加信息
      )
      this.$store.commit('readySendMsgFromApp', {
        messageObj: messageObj
      })
      this.$refs.msgEditArea.initMsgBody();
    },

  },
  mounted() {
    this.thisWidth = this.$refs.body.offsetWidth;
    this.thisHeight = this.$refs.body.offsetHeight;
    this.molleHeight.splice(1, 1, this.$refs.ta.offsetHeight,
      // 44+44
    )
    this.molleHeight.splice(0, 1,
      // ( this.thisHeight - 88 ) * 0.7
      (this.thisHeight - this.molleHeight[1]) * 0.7
    )
    this.molleHeight.splice(2, 1,
      // ( this.thisHeight - 88 ) * 0.3
      (this.thisHeight - this.molleHeight[1]) * 0.3
    )
    // 监听窗口改变
    window.onresize = () => {
      return (() => {
        this.thisWidth = this.$refs.body.offsetWidth;
        this.thisHeight = this.$refs.body.offsetHeight;
        this.molleHeight.splice(1, 1, this.$refs.ta.offsetHeight,
          // 44+44
        )
        this.molleHeight.splice(0, 1,
          // ( this.thisHeight - 88 ) * 0.7
          (this.thisHeight - this.molleHeight[1]) * 0.7
        )
        this.molleHeight.splice(2, 1,
          // ( this.thisHeight - 88 ) * 0.3
          (this.thisHeight - this.molleHeight[1]) * 0.3
        )
      })();
    };
  },
}